<template>
  <a-modal width="800px" v-model:open="open" title="订单拦截" @cancel="handleCancel">
      <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="{span: 8}"
          :label-wrap="{span: 5}"
      >
        <a-row>
          <a-col :span="10" :offset="1">
              <a-form-item  ref="platform" label="平台" name="platform">
                <a-input disabled v-model:value="formState.platform" />
              </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item  ref="orderId" label="平台订单" name="orderId">
              <a-input disabled v-model:value="formState.orderId" />
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item  ref="saleOrderCode" label="易仓订单" name="saleOrderCode">
              <a-input disabled v-model:value="formState.saleOrderCode" />
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item  ref="zendeskTicket" label="zendesk工单" name="zendeskTicket">
              <a-input v-model:value="formState.zendeskTicket" />
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item  ref="cancelType" label="操作类型" name="cancelType">
              <div style="display: flex;">
                <a-select
                    ref="select"
                    v-model:value="formState.cancelType"
                >
                  <a-select-option value="0"> 拦截并作废 </a-select-option>
                  <a-select-option value="7"> 拦截成问题件 </a-select-option>
                </a-select>
                <a-tooltip>
                  <template #title>
                    默认拦截并作废。当选择拦截并作废时，仅当包裹未缺货时会处理成作废，否则仍按问题件进行拦截。
                  </template>
                  <QuestionCircleOutlined style="margin-left: 5px" />
                </a-tooltip>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="22">
            <a-form-item :label-col="{span: 4}" ref="applyMemo" label="描述" name="applyMemo">
              <a-textarea v-model:value="formState.applyMemo"></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    <template #footer>
        <a-button @click="handleCancel" style="margin-right: 5px">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk" style="margin-right: 5px">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { computed, defineProps, defineEmits,ref,reactive } from 'vue'
import {message} from "ant-design-vue";
import {getOrderInterceptInfo, orderIntercept} from "@/api/standard/index.js";
const formRef = ref()
const loading = ref(false)
const formState = reactive({
  platform:'',
  saleOrderCode:'',
  orderId:'',
  zendeskTicket:'',
  cancelType:'0',
  applyMemo:''
})
/**
 * 表单校验规则
 * @type {{yicangdingdan: [{trigger: string, message: string, required: boolean}], miaoshu: [{trigger: string, message: string, required: boolean}], caozuoleixing: [{trigger: string, message: string, required: boolean}]}}
 */
const rules = {
  saleOrderCode:[
      { required: true, message: '请填写易仓订单号', trigger: 'blur' }
  ],
  operationType:[
      { required: true, message: '请填写操作类型', trigger: 'blur' }
  ],
  applyMemo:[
      { required: true, message: '请填写描述', trigger: 'blur' }
  ]
}
const props = defineProps({
  showInterception:{
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['close'])
/**
 * 表单提交
 */
const handleOk = () => {
  formRef.value
      .validate()
      .then(async () => {
        try{
          loading.value = true
          const res = await orderIntercept(formState)
          emit('close')
          message.success('订单拦截成功');
          formRef.value.resetFields();
        }catch(e){
          message.error(e)
        }finally {
          loading.value = false
        }
      })
}
/**
 * 表单取消
 */
const handleCancel = () => {
  emit('close')
  formRef.value.resetFields();
}
const open = computed(() => {
  return props.showInterception
})

const init = async (saleOrderCode) => {
  console.log(saleOrderCode)
  const res = await getOrderInterceptInfo({saleOrderCode:saleOrderCode})
  if(Object.keys(res.result).length > 0){
    formState.platform = res.result.platform
    formState.orderId = res.result.orderId
    formState.saleOrderCode = res.result.saleOrderCode
  }
}

defineExpose({
  init
})
</script>
<style scoped>

</style>
